<template>

	<view class="container">
		<!-- 顶部切换标签 -->
		<view class="tabs">
			<view :class="['tab', activeTab === 'published' ? 'active' : '']" @click="switchTab('published')">
				已上架
			</view>
			<view :class="['tab', activeTab === 'unpublished' ? 'active' : '']" @click="switchTab('unpublished')">
				未上架
			</view>
		</view>

		<!-- 列表 -->
		<scroll-view class="list" scroll-y>
			<view class="item" v-for="(activity, index) in filteredActivities" :key="index"
				@click="goToDetails(activity)">
				<view class="item-content">
					<text class="title">{{ activity.title }}</text>
					<text :class="[
              'status',
              activity.status === '审核中' ? 'pending' : activity.status === '审核成功' ? 'success' : 'fail'
            ]">
						{{ activity.status }}
					</text>
				</view>
				<view class="item-time">{{ activity.time }}</view>
				<view class="item-actions">
					<!-- 判断按钮显示规则 -->
					<button v-if="activity.status === '审核成功' && activeTab === 'unpublished'" class="btn up"
						@click="handleAction('上架', activity)">
						上架
					</button>
					<button v-if="activity.status !== '审核成功'" class="btn delete" @click="handleAction('下架', activity)">
						删除
					</button>
				</view>
			</view>
		</scroll-view>

		<!-- 底部发布按钮 -->
		<view class="publish-button" @click="handlePublish">
			+ 发布活动
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: "unpublished", // 当前选中的标签
				activities: [{
						title: "阳春三月油江南活动开始报名了",
						status: "审核中",
						time: "2023-03-10 11:09",
					},
					{
						title: "阳春三月油江南活动开始报名了",
						status: "审核成功",
						time: "2023-03-10 11:09",
					},
					{
						title: "阳春三月油江南活动开始报名了",
						status: "审核失败",
						time: "2023-03-10 11:09",
					},
				],
			};
		},
		computed: {
			// 根据当前标签筛选活动
			filteredActivities() {
				if (this.activeTab === "published") {
					return this.activities.filter(
						(activity) => activity.status === "审核成功"
					);
				} else {
					return this.activities.filter(
						(activity) => activity.status !== "审核成功"
					);
				}
			},
		},
		methods: {
			// 切换标签
			switchTab(tab) {
				this.activeTab = tab;
			},
			// 处理上架、删除、下架等操作
			handleAction(action, activity) {
				if (action === "上架") {
					uni.showToast({
						title: `已上架活动: ${activity.title}`,
						icon: "success",
					});
				} else if (action === "下架") {
					uni.showModal({
						title: "确认操作",
						content: `确定要${action}活动 "${activity.title}" 吗？`,
						success: (res) => {
							if (res.confirm) {
								this.activities = this.activities.filter(
									(item) => item !== activity
								);
								uni.showToast({
									title: `已${action}`,
									icon: "none",
								});
							}
						},
					});
				}
			},
			// 发布活动
			handlePublish() {
				uni.navigateTo({
					url: "/pages/lzx/business/publishEvent", // 修改为跳转的页面路径
				});
			},
			//活动详情
			goToDetails(activity) {
				// 使用 encodeURIComponent 编码传递数据
				const activityData = encodeURIComponent(JSON.stringify(activity));
				uni.navigateTo({
					url: `/pages/lzx/business/eventDetails?data=${activityData}`,
				});
			},
		},
	};
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f8f8f8;
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		background-color: #ffffff;
		padding: 10px 0;
		border-bottom: 1px solid #e5e5e5;
	}

	.tab {
		flex: 1;
		text-align: center;
		color: #999;
		font-size: 16px;
		padding: 10px 0;
	}

	.tab.active {
		color: #007aff;
		font-weight: bold;
		border-bottom: 2px solid #007aff;
	}

	.list {
		flex: 1;
		padding: 10px;
		background-color: #f8f8f8;
	}

	.item {
		background-color: #ffffff;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.item-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.title {
		font-size: 16px;
		font-weight: bold;
	}

	.status {
		font-size: 14px;
	}

	.status.pending {
		color: orange;
	}

	.status.success {
		color: green;
	}

	.status.fail {
		color: red;
	}

	.item-time {
		font-size: 12px;
		color: #999;
		margin-bottom: 10px;
	}

	.item-actions {
		display: flex;
		gap: 10px;
	}

	.btn {
		padding: 5px 15px;
		font-size: 14px;
		color: #ffffff;
		border-radius: 5px;
	}

	.btn.up {
		background-color: #007aff;
	}

	.btn.delete {
		background-color: #ff4d4d;
	}

	.publish-button {
		text-align: center;
		background-color: #007aff;
		color: #ffffff;
		padding: 15px 0;
		font-size: 18px;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>